<template>
  <div class="index_wrap">
    <div class="index_left">
      <div class="index_left_block">
        <h2 class="title">全部商品</h2>
        <div v-for="(product, index) in productList" :key="index">
          <h3 class="category">{{ product.category }}</h3>
          <ul class="list">
            <li v-for="item in product.list" :key="item" class="item">
              <a :href="item.url" target="_blank">{{ item.name }}</a>
              <span v-if="item.hot" class="hot_tag">HOT</span>
            </li>
          </ul>
          <div class="hr" v-if="index % 2 == 0"></div>
        </div>
      </div>
      <div class="index_left_block lastest_news">
        <h2 class="title">最新消息</h2>
        <ul class="list">
          <li class="item" v-for="item in news" :key="item">
            <a :href="item.url" target="_blank">{{ item.author_name }}</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="index_right">
      <div class="swiper_wrap">
        <swiper :options="swiperOptions" ref="mySwiper">
          <swiper-slide
            class="swiper-item"
            v-for="item in swiperList"
            :key="item"
          >
            <a href="https://www.baidu.com" target="_blank">
              <img :src="item.imgUrl" alt="" class="swiper_img" />
            </a>
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
      <div class="board_list">
        <div
          class="item"
          v-for="(board, index) in boardList"
          :class="'index-board-' + board.tag"
          :key="index"
        >
          <div class="item-inner">
            <h2>{{ board.title }}</h2>
            <p>{{ board.desc }}</p>
            <div class="button">
              <router-link :to="{ path: '/details/'  + board.tag }"
                >立即购买</router-link
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "layout",
  data() {
    return {
      productList: [
        {
          category: "手机应用类",
          list: [
            {
              name: "91助手",
              url: "http://www.wwtliu.com/blog",
              hot: false,
            },
            {
              name: "万豆梅",
              url: "http://www.wwtliu.com/blog",
              hot: false,
            },
            {
              name: "91助手",
              url: "http://www.wwtliu.com/blog",
              hot: true,
            },
          ],
        },
        {
          category: "开发工具",
          list: [
            {
              name: "VSCode",
              url: "http://www.wwtliu.com/blog",
              hot: false,
            },
            {
              name: "sublimt",
              url: "http://www.wwtliu.com/blog",
              hot: false,
            },
            {
              name: "atom",
              url: "http://www.wwtliu.com/blog",
              hot: true,
            },
            {
              name: "Pycharm",
              url: "http://www.wwtliu.com/blog",
              hot: false,
            },
          ],
        },
      ],
      news: [
        { author_name: "百度", url: "http://www.baidu.com" },
        { author_name: "腾讯", url: "http://baidu.com" },
        { author_name: "新浪", url: "http://baidu.com" },
        { author_name: "阿里", url: "http://baidu.com" },
        { author_name: "斗鱼", url: "http://baidu.com" },
        { author_name: "人人", url: "http://baidu.com" },
        { author_name: "微信", url: "http://baidu.com" },
        { author_name: "网易", url: "http://baidu.com" },
      ],
      swiperOptions: {
        // direction:'vertical',
        // 显示小点
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        loop: true,
        autoplay: true,
        // autoplay:{
        //   delay:2000,
        //   disableOnInteraction: true,
        // },
        speed: 500,
      },
      swiperList: [
        {
          id: "001",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1805/d4/d41d77b6ba8aca02.jpg_750x200_ac3d9a73.jpg",
        },
        {
          id: "002",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1805/f1/e57bc93226317102.jpg_750x200_9ab37bd0.jpg",
        },
        {
          id: "003",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1804/c4/1cdd28811593b802.jpg_750x200_5fbb7c91.jpg",
        },
      ],
      boardList: [
        {
          title: "品牌营销",
          desc: "开放产品是一款开放软件1",
          tag: "earth",
        },
        {
          title: "开放产品",
          desc: "开放产品是一款开放软件2",
          tag: "loud",
        },
        {
          title: "使命必达",
          desc: "开放产品是一款开放软件3",
          tag: "car",
        },
        {
          title: "永攀高峰",
          desc: "开放产品是一款开放软件4",
          tag: "hill",
        },
      ],
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
  },
};
</script>
<style lang="scss"></style>
